<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
        name="viewport">
  <title>树形菜单测试</title>
  <#include "/common/treelib.html">
</head>
<body>
<div style="width:200px;height:595px;border: 1px solid #e5e5e5;float:left;">
  <div align="left" style="height:25px;background-color: #f6f6f6;
	    	 border-bottom: 1px solid #e5e5e5;margin: 0;color: #0068a3;">
    客户中心
  </div>
  <ul class="ztree" id="treeDemo"></ul>
</div>
<div style="width:1130px;height:100%;float:left;">
  <iframe id="iframepage" src="/demo/welcome"
          style="background: white;border: 0; width: 100%; height: 595px; padding: 0;"></iframe>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var demoTreeId = $("#treeDemo");
        var treeName = "treeDemo";
        var TreeManager = {
            /**
             *初始化方法
             */
            init: function () {
                /**
                 * 设置zTree树
                 */
                var setting = {
                    async: {
                        enable: true,
                        url: TreeManager.getUrlByNodeId
                    },
                    check: {
                        enable: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view: {
                        expandSpeed: ""
                    },
                    callback: {
                        beforeExpand: TreeManager.beforeExpand,
                        onAsyncSuccess: TreeManager.onAsyncSuccess,
                        onAsyncError: TreeManager.onAsyncError,
                        onClick: TreeManager.zTreeOnClick
                    }
                };
                var nodesJson = "${nodesJson}";

                var zNodes = eval(nodesJson);
                $.fn.zTree.init(demoTreeId, setting, zNodes);//初始化树
            },
            /**
             * 功能：通过NodeId获得节点的孩子节点
             * 调用：当父节点展开时，调用，返回该父节点的子节点
             * 后台数据格式：JSON
             * @param treeId 树控件的Id
             * @param treeNode 树节点对象：包含Id等信息
             * @return
             */
            getUrlByNodeId: function (treeId, treeNode) {
                return "getNodesDataById?treeNodeId=" + treeNode.id;
            },
            /**
             * 展开之前执行的函数
             * @param treeId
             * @param treeNode
             * @return
             */
            beforeExpand: function (treeId, treeNode) {
                if (!treeNode.isAjaxing) {
                    TreeManager.ajaxGetNodes(treeNode, "refresh");
                    return true;
                } else {
                    Jmts.alert("Loading...");
                    return false;
                }
            },
            /**
             * 加载成功后执行的函数
             * @param event 封装了js的事件
             * @param treeId 树控件的Id
             * @param treeNode 树节点对象
             * @param msg 返回的JSON格式的消息
             * @return
             */
            onAsyncSuccess: function (event, treeId, treeNode, msg) {
                if (!msg || msg.length == 0) {
                    return;
                }
                var zTree = $.fn.zTree.getZTreeObj(treeName);
                treeNode.icon = "";
                zTree.updateNode(treeNode);//更新树结构
                zTree.selectNode(treeNode.children[0]);//设置为第一个子节点为选中状态
            },
            onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                var zTree = $.fn.zTree.getZTreeObj(treeName);
                Jmts.alert("Error ! 异步获取数据异常");
                treeNode.icon = "";
                zTree.updateNode(treeNode);
            },
            ajaxGetNodes: function (treeNode, reloadType) {
                var zTree = $.fn.zTree.getZTreeObj(treeName);
                if (reloadType == "refresh") {
                    zTree.updateNode(treeNode);
                }
                zTree.reAsyncChildNodes(treeNode, reloadType, true);
            },
            /**
             * 功能：当点击树节点时，调用该函数
             * @param event
             * @param treeId
             * @param treeNode
             * @return
             */
            zTreeOnClick: function (event, treeId, treeNode) {
                var isParent = treeNode.isParent;
                if (!isParent) {//当不是父节点的时候跳转页面
                    document.getElementById("iframepage").src = "/demo/query";
                }
            }
        };
        TreeManager.init();
    });
</script>
</html>
